<template>
  <el-row class="tac">
    <el-col :span="24">
      <!-- unique-opened  只保证一个选中-->
      <el-menu class="el-menu-vertical-demo" :default-active="activeroute" @open="handleOpen" @close="handleClose"
        unique-opened router background-color="#ffffff" text-color="#000000" active-text-color="#ffd04b">
          
        <el-submenu v-for="(item,index) in nav" :key="index"  :index="index.toString()" v-if="item.show == true">
          <template slot="title">
            <i :class="item.style"></i>
            <span>{{item.cname}}</span>
          </template>
          <el-menu-item-group>
            <el-menu-item  v-for="(a,b) in item.list" :key="b" :index="a.link" v-if="a.show == true">{{a.cname}}</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        

      
        <el-submenu index="20" v-if="application_show">
          <template slot="title">
            <i class="el-icon-con7"></i>
            <span>应用管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/application">应用管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="21" v-if="$store.state.my_super != 0">
          <template slot="title">
            <i class="el-icon-con1"></i>
            <span>权限管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="/index/jurisdictionall">权限管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>



      </el-menu>
    </el-col>
  </el-row>
</template>

<script>
  export default {
    data() {
      return {
        activeroute: '',
        application_show: false,
        nav:[],
        select_arr:[]
      }
    },
  
    created() {

      this.activeroute = this.$route.path //防止刷新时锁定不了路由
      this.show_fun()
      this.list_fun()
    },
    watch: { //监听路由变化
      '$route': 'upgetPath'
    },
    methods: {
      list_fun(){
            this.post("/cate/listOfData", {
	           }).then(res => {
               this.select_arr = this.$store.state.my_pxarr.split(',')
               this.nav = res.result
               for(let item of this.nav) {
                    if( this.select_arr.indexOf(item.cid.toString()) == -1){
                         item.show = false
                    }else{
                        item.show = true
                    }
                    for(let a of item.list) {
                      if( this.select_arr.indexOf(a.cid.toString()) == -1){
                            a.show = false
                        }else{
                            a.show = true
                        }
                    }
                }
                //console.log(this.nav,"左侧导航数据6666")
            }) 
           
      },
      show_fun() {

        this.post("package/enable", {}).then(res => {
          //console.log(res)
          if (res.error_code == 0) {
            if (res.result == false) {
              this.application_show = false
            } else if (res.result == true) {
              this.application_show = true
            }

          } else {

          }

        })

      },
      upgetPath() { //监听路由变化
        this.activeroute = this.$route.path
      },
      handleOpen(key, keyPath) {
        // console.log(key, keyPath)
      },
      handleClose(key, keyPath) {
        // console.log(key, keyPath)
      }
    }
  }
</script>
<style scoped>
  .el-menu {
    border: none;
    /* box-shadow: 3px 0px 7px 0px #E0E9FC; */
  }

  .el-submenu .el-menu-item {
    min-width: 100%;
  }

  /* .el-submenu .is-active{
    background: linear-gradient(90deg,  #5962FF, #8265FF);
    border-radius: 0px 8px 8px 0px;
    color: white !important;
    width: 175px;
} */
  .el-submenu .el-menu-item-group {
    margin-top: -14px;
  }

  /* .el-menu-item-group>>>.el-menu-item-group__title{
       padding:0px;
} */
  .el-menu-item-group>>>.el-menu-item-group__title .title_box {
    padding: 17px 0px 0px 0px;
  }

  /* 主选中导航样式 */
  .el-submenu.is-active>>>.el-submenu__title {
    /* color:#ffd04b !important;
  border-left: 3px solid #ffd04b; */
    background: linear-gradient(90deg, #5962FF, #8265FF);
    border-radius: 0px 10px 10px 0px;
    color: white !important;
    width: 170px;
  }

  .el-menu-item:focus,
  .el-menu-item:hover {
    outline: 0;
    background-color: white !important;
  }

  .el-icon-con1 {
    background: url(../../assets/images/nav_tb1.png) center no-repeat;
    background-size: 100% 100%;
    width: 15px !important;
    height: 15px;
  }

  .el-submenu.is-active>>>.el-icon-con1 {
    background: url(../../assets/images/nav_tb1_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 15px;
    height: 15px;
  }

  .el-icon-con1:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


  .el-icon-con2 {
    background: url(../../assets/images/nav_tb2.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con2 {
    background: url(../../assets/images/nav_tb2_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con2:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con3 {
    background: url(../../assets/images/nav_tb3.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con3 {
    background: url(../../assets/images/nav_tb3_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con3:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


  .el-icon-con4 {
    background: url(../../assets/images/nav_tb4.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con4 {
    background: url(../../assets/images/nav_tb4_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con4:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con5 {
    background: url(../../assets/images/nav_tb5.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con5 {
    background: url(../../assets/images/nav_tb5_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con5:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con6 {
    background: url(../../assets/images/nav_tb6.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con6 {
    background: url(../../assets/images/nav_tb6_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con6:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con7 {
    background: url(../../assets/images/nav_tb7.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con7 {
    background: url(../../assets/images/nav_tb7_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con7:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con8 {
    background: url(../../assets/images/nav_tb8.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con8 {
    background: url(../../assets/images/nav_tb8_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con8:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


  .el-icon-con9 {
    background: url(../../assets/images/nav_tb9.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con9 {
    background: url(../../assets/images/nav_tb9_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con9:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }


   .el-icon-con10 {
    background: url(../../assets/images/nav_tb10.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con10 {
    background: url(../../assets/images/nav_tb10_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con10:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

   .el-icon-con11 {
    background: url(../../assets/images/nav_tb11.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con11 {
    background: url(../../assets/images/nav_tb11_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con11:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }

  .el-icon-con12 {
    background: url(../../assets/images/nav_tb12.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px !important;
    height: 16px;
  }

  .el-submenu.is-active>>>.el-icon-con12 {
    background: url(../../assets/images/nav_tb12_active.png) center no-repeat;
    background-size: 100% 100%;
    width: 16px;
    height: 16px;
  }

  .el-icon-con12:before {
    content: "con1";
    font-size: 16px;
    visibility: hidden;
  }
</style>
